<template>
<div>
  <a-modal
    title="更改部门"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item label="机构" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
        <a-tree-select
          v-decorator="['orgId', { rules: [{ required: true, message: '请选择机构！' }] }]"
          style="width: 100%"
          :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
          :treeData="orgTree"
          placeholder="请选择机构"
          treeDefaultExpandAll
        >
          <span slot="title" slot-scope="{ id }">{{ id }} </span>
        </a-tree-select>
      </a-form-item>
    </a-form>
  </a-modal>
</div>
</template>

<script>
import { changeOrg } from '@/api/modular/system/roleManage'
import { getOrgTree } from '@/api/modular/system/orgManage'

export default {
  name: 'changeOrg',
  data(){
    return{
      visible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      orgTree: [],
      form: this.$form.createForm(this),
      userId:'',
    }
  },
  methods:{
    open(userObj,sysEmpId){
      this.userId = userObj.id
      this.$nextTick(() => {
        this.form.setFieldsValue({
          orgId: sysEmpId
        })
      })

      this.getOrgTree()
      this.visible = true
    },
    getOrgTree() {
      getOrgTree().then(res => {
        this.formLoading = false
        if (!res.success) {
          this.orgTree = []
          return
        }
        this.orgTree = res.data
      })
    },
    handleSubmit(){
    this.form.validateFields((err, values) => {
      if (!err) {
        this.confirmLoading = true
        changeOrg({userId:this.userId,...values}).then(res => {
          if(res.success){
          this.visible = false
          this.$message.success('更改成功')
          this.$emit('ok')
          }else{
            this.$message.error(res.message)
          }
        }).finally(()=> {
          this.confirmLoading = false
        })
      }
    });
    },
    handleCancel(){
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">

</style>